<template>
  <div class="goodsinfo-container">
    <transition 
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>
  <!-- 商品轮播图区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :lunbotuList="lunbotuList" isfull="false"></swiper>
        </div>
      </div>
    </div>
    <!-- 商品购买区域 -->
    <div class="mui-card">
      <div class="mui-card-header">小米8 透明探索版</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            市场价：<del>￥2133</del>&nbsp;&nbsp;销售价
            <span class="now_price">￥2199</span>
          </p>
          <p>购买数量:<numbox @getcount="getSelectedCount" :max="60"></numbox></p>
          <p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
            <!-- 分析：如何实现加入购物车时候，拿到选择的数量 -->
            <!-- 1.经过分析发现，按钮属于 goodsinfo页面，数字属于 numberbox组件 -->
            <!-- 2.由于涉及到了父子组件的嵌条了，所以，无法直接在 goodsinfo 页面中获取
            到选中的商品数量值 -->
            <!-- 3.怎么解决这个问题，涉及到了子组件向父组件传值了（事件调用机制） -->
            <!-- 4.事件调用的本质：父向子传递方法，子调用这个方法，同时把数据传递给这个方法 -->
          </p>
        </div>
      </div>
    </div>
    <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：SD2932214404</p>
          <p>库存情况：60件</p>
          <p>上架时间：2015-04-20 01:19:30</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click="goDesc('1')">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click="goComment('2')">商品评论</mt-button>
      </div>
    </div>
  </div>
  
</template>
<script>
//导入轮播图组件
import swiper from '../subcomponents/swiper.vue'
import numbox from '../subcomponents/goodsinfo_numbox.vue'
export default {
  data(){
    return{
      lunbotuList:[],
      goodsinfo:{},//商品信息
      ballFlag:false,//控制小球隐藏和显示的标识符
      selectedCount:1, //保存用户选中的商品数量，默认为1
    }
  },
  created(){
    this.getlunbotu()
  },
  methods:{
    getlunbotu(){
      this.lunbotuList.push({'image_url':'https://i1.mifile.cn/f/i/2018/mi8/summary/index1.jpg'})
      this.lunbotuList.push({'image_url':'https://i1.mifile.cn/f/i/2018/mi8/summary/index2.jpg'})
      this.lunbotuList.push({'image_url':'https://i1.mifile.cn/f/i/2018/mi8/summary/index3.jpg'})
    },
    getGoodsInfo(){

    },
    goDesc(id){
      //点击使用编程式导航跳转到图文介绍页面
      this.$router.push({name:'goodsdesc', params:{id}})
    },
    goComment(id){
      //点击跳转到评论页面
      this.$router.push({name:'goodscomment', params:{id}})
    },
    addToShopCar(){
      this.ballFlag = !this.ballFlag
      //拼接出一个，要保存到 store中 car数组里的商品对象
      var goodsinfo = {
        id:1, count:
        this.selectedCount, 
        price:2199, 
        selected:true
      }
      //调用store中的mutations来将商品加入购物车
      this.$store.commit('addToCar',goodsinfo)
    },
    beforeEnter(el){
      el.style.transform = "translate(0, 0)"
    },
    enter(el,done){
      el.offsetWidth
      //小球动画优化思路：
      //1. 先分析导致动画不准确的本质原因：我们把小球最终位移到的位置，已经局限在了某一分辨率下的
      //  滚动条未滚动的情况下
      //2. 只有分辨率和测试的时候不一样，或者滚动条有一定的滚动距离之后，问题就出现了；
      //3. 因此，我们经过分析，得到结论：不能吧位置的横纵坐标直接写死了，而是应该
      //   根据不同情况，动态计算这个坐标值
      //4. 经过分析，得出思路：先得到徽标的横纵坐标，再得到小球的横纵坐标，然后让 
      //   y值求差，x值也求差，得到的结果，就是横纵坐标要位移的距离
      //5. 如何获取徽标和小球的位置， domObject.getBoundingClientRect()
      //获取小球在页面中的位置
      const ballPosition = this.$refs.ball.getBoundingClientRect()
      //获取徽标在页面中的位置
      const badgePosition = document.getElementById("badge").getBoundingClientRect()
      const xDist = badgePosition.left - ballPosition.left
      const yDist = badgePosition.top - ballPosition.top
      el.style.transform = `translate(${xDist}px, ${yDist}px)`
      //el.style.transform = "translate(65px, 131px)"
      el.style.transition = "all 0.5s cubic-bezier(.17,.67,.83,.67)"
      done()
    },
    afterEnter(el){
      this.ballFlag = !this.ballFlag
    },
    getSelectedCount(count){
      //当子组件把选中的数量传递给父组件的时候，把选中的值保存到data上
      this.selectedCount = count
      console.log("父组件拿到的值为：",this.selectedCount )
    }
  },
  components:{
    swiper,
    numbox
  }
}
</script>
<style lang="scss" scoped>
.goodsinfo-container{
  background-color: #eee;
  overflow: hidden;
  .now_price{
    color:red;
    font-size:16p;
    font-weight: bold;
  }
  .mui-card-footer{
    display: block;
    button{
      margin:15px 0;
    }
  }
  .ball{
    background-color:red;
    width:15px;
    height:15px;
    border-radius: 50%;
    position: absolute;
    z-index:99;
    top:390px;
    left:137px;
    //transform: translate(88px, 230px);
  }
}
</style>


